<template>
  <div>
  <v-card
          max-width="375"
          class="mx-auto"
  >
    <v-img
            src="https://img-blog.csdnimg.cn/20210524171202942.png?0"
            height="300px"
            dark
    >
      <v-row class="fill-height">
        <v-card-title>
          <v-btn
                  dark
                  icon
                  @click="goHome"
          >
            <v-icon>mdi-chevron-left</v-icon>
          </v-btn>

          <v-spacer></v-spacer>

          <v-btn
                  dark
                  icon
                  class="mr-4"
          >
            <v-icon>mdi-pencil</v-icon>
          </v-btn>

          <v-btn
                  dark
                  icon
          >
            <v-icon>mdi-dots-vertical</v-icon>
          </v-btn>
        </v-card-title>

        <v-spacer></v-spacer>

        <v-card-title class="white--text pl-12 pt-12">
          <div class="display-1 pl-12 pt-12">
            I am Ren yi
          </div>
        </v-card-title>
      </v-row>
    </v-img>

    <v-list two-line>
      <v-list-item>
        <v-list-item-icon>
          <v-icon color="indigo">
            mdi-qqchat
          </v-icon>
        </v-list-item-icon>

        <v-list-item-content>
          <v-list-item-title>2822930767</v-list-item-title>
          <v-list-item-subtitle>QQ</v-list-item-subtitle>
        </v-list-item-content>

        <v-list-item-icon>
          <v-icon>mdi-message-text</v-icon>
        </v-list-item-icon>
      </v-list-item>



      <v-divider inset></v-divider>

      <v-list-item>
        <v-list-item-icon>
          <v-icon color="indigo">
            mdi-email
          </v-icon>
        </v-list-item-icon>

        <v-list-item-content>
          <v-list-item-title>2822930767@qq.com</v-list-item-title>
          <v-list-item-subtitle>QQ Email</v-list-item-subtitle>
        </v-list-item-content>
      </v-list-item>



      <v-divider inset></v-divider>

      <v-list-item>
        <v-list-item-icon>
          <v-icon color="indigo">
            mdi-map-marker
          </v-icon>
        </v-list-item-icon>

        <v-list-item-content>
          <v-list-item-title>成都市</v-list-item-title>
          <v-list-item-subtitle>四川省</v-list-item-subtitle>
        </v-list-item-content>
      </v-list-item>

      <v-divider inset></v-divider>

      <v-list-item>
        <v-list-item-icon>
          <v-icon color="indigo">
            mdi-account
          </v-icon>
        </v-list-item-icon>

        <v-list-item-content>
          <v-list-item-title>学生 20岁</v-list-item-title>
          <v-list-item-subtitle>成都农业科技职业学院-园林技术专业</v-list-item-subtitle>

        </v-list-item-content>

      </v-list-item>

      <br>
      <dialog></dialog>
    </v-list>

  </v-card>
  <br>
  <br>
  </div>
</template>

<script>

  import Dialog from './Dialog'

  export default {
    name: "Card",
    components:{
      Dialog
    },
    methods: {
      goHome(){
        this.$router.replace("/home")
      }
    }
  }
</script>

<style scoped>

</style>